<template>
  <div id="company">
    <el-form ref="form"
             v-if="$store.getters.getUserType == 'server'"
             :model="form"
             label-width="100px">
      <el-form-item label="账号:">
        <el-input v-model="form.ser_name" disabled></el-input>
      </el-form-item>
      <el-form-item label="联系电话:">
        <el-input v-model="form.ser_phone" disabled></el-input>
      </el-form-item>
      <el-form-item label="邮箱:">
        <el-input v-model="form.ser_email" :disabled="!isEdit"></el-input>
      </el-form-item>
      <el-form-item label="企业名称:">
        <el-input v-model="form.ser_cname" :disabled="!isEdit"></el-input>
      </el-form-item>
      <el-form-item label="办公地址:">
        <el-popover
                placement="top-start"
                trigger="click">
          <v-distpicker :province="address.province"
                        :city="address.city"
                        :area="address.area"
                        :disabled="!isEdit"
                        @selected="data => {form.ser_address = data.province.value + data.city.value + data.area.value}">

          </v-distpicker>
          <el-input v-model="form.ser_address"
                    slot="reference"
                    :disabled="!isEdit"></el-input>
        </el-popover>

      </el-form-item>
      <el-form-item label="注册地址:">
        <el-popover
                placement="top-start"
                trigger="click">
          <v-distpicker :province="re_address.province"
                        :city="re_address.city"
                        :area="re_address.area"
                        :disabled="!isEdit"
                        @selected="data => {form.ser_re_address = data.province.value + data.city.value + data.area.value}">

          </v-distpicker>
          <el-input v-model="form.ser_re_address"
                    slot="reference"
                    :disabled="!isEdit"></el-input>
        </el-popover>
      </el-form-item>
      <el-form-item label="注册时间:">
        <el-date-picker
                :disabled="!isEdit"
                :picker-options="pickerOptions"
                value-format="yyyy-MM-dd"
                v-model="form.ser_time">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="公司类型:">
        <el-select v-model="form.ser_type" :disabled="!isEdit">
          <el-option v-for="(item,index) in dictionary.companyType
"
                     :key="index"
                     :label="item.name" :value="item.key"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="法定代表人:">
        <el-input v-model="form.ser_delegate" :disabled="!isEdit"></el-input>
      </el-form-item>
      <el-form-item label="注册资本:">
        <el-input v-model="form.ser_money" :disabled="!isEdit"></el-input>
      </el-form-item>
      <el-form-item label="头像:">
        <upload  @getImgUrl="getImgUrl" :isEdit="isEdit" :type="1"/>
      </el-form-item>
    </el-form>
    <template v-if="isEdit">
      <el-button  type="primary" @click="cancel">
        取消
      </el-button>
      <el-button  type="primary" @click="save">
        保存
      </el-button>
    </template>
    <template v-else>
      <el-button type="primary" @click="edit">
        编辑
      </el-button>
    </template>
  </div>
</template>

<script>
  import axios from "axios";
  import {cloneObject} from "../../../utils/common";
  import {dictionary} from "../../../utils/allDictionary";
  import Upload from "../../../components/content/Upload";

  export default {
    name: "Company",
    components:{
      Upload
    },
    mounted() {
      this.form = this.$store.getters.getInfo
      console.log('服务商登录')
      console.log(this.form)
    },
    data(){
      return{
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        },
        form:{},
        address : {province:'',city:'',area:''},
        re_address:{province:'',city:'',area:''},
        isEdit:false,
        dictionary:dictionary,
      }
    },
    methods:{
      edit(){
        this.isEdit = true
      },
      save(){
        this.isEdit = false
        let url = 'https://haotry.top/api/serviceSide/editCompanyInfo'
          axios.post(url,JSON.stringify(this.form),{
            headers:{
              'Content-Type':'application/json'
            }
          }).then(res => {
            let data = res.data

            if(data.status === 200){
              alert(data.msg)
              this.$store.commit('setInfo',{info:this.form})
            }
            else{
              alert(data.msg)
              this.form = cloneObject(this.$store.getters.getInfo)
            }
          })

      },
      cancel(){
        this.isEdit = false
        this.form = cloneObject(this.$store.getters.getInfo)
      },

      getImgUrl(url){
        this.form.ser_avatar = url
        console.log(url)
      }
    }
  }
</script>

<style scoped>
  #company{
    margin: 20px;
    width: 500px;
    font-size: 18px;
  }
  /deep/.el-input{
    font-size: 16px;
  }
  /deep/.el-input.is-disabled .el-input__inner{
    color: #999;
  }
  /deep/.el-form-item{
    margin-bottom: 10px;
  }
  /deep/.el-select,.el-date-editor.el-input{
    width: 100%;
  }
  /deep/.distpicker-address-wrapper select{
    width: 130px;
  }
  /deep/.distpicker-address-wrapper select[disabled]{
    background-color: #F5F7FA;
    color: #999;
  }

  /*.avatar-uploader{*/
  /*  text-align: left;*/
  /*}*/

  /*/deep/.avatar-uploader .el-upload {*/
  /*  !*border: 1px dashed #ec1212;*!*/
  /*  background-color: #fff;*/
  /*  border-radius: 6px;*/
  /*  cursor: pointer;*/
  /*  position: relative;*/
  /*  overflow: hidden;*/
  /*}*/
  /*/deep/.avatar-uploader .el-upload:hover {*/
  /*  border-color: #409EFF;*/
  /*}*/
  /*/deep/.avatar-uploader-icon {*/
  /*  font-size: 28px;*/
  /*  color: #528bdc;*/
  /*  width: 178px;*/
  /*  height: 178px;*/
  /*  line-height: 178px;*/
  /*  text-align: center;*/
  /*}*/
  /*.avatar {*/
  /*  width: 178px;*/
  /*  height: 178px;*/
  /*  display: block;*/
  /*}*/
</style>